<template>
	<view class="flex flex-col items-center" v-if="!skip">
		<image src="../../static/registerLogo.png" mode="" class="w-750rpx h-120rpx mt-160rpx"></image>
		<p class="mt-48rpx title">安徽爱谱华顿MES系统</p>
		<view class="mt-140rpx w-630rpx">
			<u-form :model="form" ref="uForm">
				<u-form-item label="" prop="username" class="w-630rpx" style="padding: 20rpx 24rpx;">
					<view class="w-100% flex-space-between">
						<input class="w-100%" v-model="form.username" type="text" placeholder="请输入账号" />
						<image @click="accountNumber" class="w-34rpx h-31rpx m-6rpx"
							src="//image01.homedo.com/Files/Images/cms/www/20230529/4861901267873667415_pic1.png"
							mode="">
						</image>
					</view>
				</u-form-item>
				<u-form-item label="" prop="intro" class="mt-24rpx w-630rpx" style="padding: 20rpx 24rpx;">
					<view class="w-100% flex-space-between" v-if="password">
						<input class="w-100%" v-model="form.password" type="text" placeholder="请输入密码" />
						<image @click="passwordConceal" class="w-50rpx h-48rpx"
							src="//image01.homedo.com/Files/Images/cms/www/20230529/4706403097217096959_pic1.png"
							mode=""></image>
					</view>
					<view class="w-100% flex-space-between" v-else>
						<input class="w-100%" v-model="form.password" type="password" password placeholder="请输入密码" />
						<image @click="passwordConceal" class="w-50rpx h-48rpx"
							src="//image01.homedo.com/Files/Images/cms/www/20230529/4627201124477180340_pic1.png"
							mode=""></image>
					</view>
				</u-form-item>
			</u-form>
			<view v-if="form.password && form.username" @click="submit" class="w-630rpx h-96rpx mt-64rpx"
				style="background: #2F7BFF;border-radius: 4rpx;">
				<view class="submitText" style="text-align: center;line-height: 96rpx;">
					登录
				</view>
			</view>
			<view v-else class="w-630rpx h-96rpx mt-64rpx"
				style="background: rgba(47,123,255,0.3);border-radius: 4rpx;">
				<view class="submitText" style="text-align: center;line-height: 96rpx;">
					登录
				</view>
			</view>
		</view>
		<u-modal v-model="show" :content="msg" :mask-close-able="true" :show-title="false"></u-modal>
		<diyLoading loadingText="登录中..." :loadingIcon="deng"></diyLoading>
	</view>
</template>

<script lang="ts" setup>
	import diyLoading from '@/components/diyLoading.vue'
	import { onMounted, reactive, ref } from 'vue'
	// import { login } from '@/common/api/login'
	import { encrypt } from '@/utils/rsaEncrypt'

	import { storeToRefs } from 'pinia'
	import { useCounterStore } from '@/store/index'
	const store = useCounterStore()
	const { logError } = storeToRefs(store)

	interface FormState {
		username : string;
		password : string;
	}
	const form = reactive<FormState>({
		username: '',
		password: ''
	})

	const deng = ref<boolean>(false)
	const password = ref<boolean>(false)

	function passwordConceal() {
		password.value = !password.value
	}

	function accountNumber() {
		form.username = ''
	}

	const msg = ref<string>('')
	const loading = ref<boolean>(false)
	const show = ref<boolean>(false)
	const skip = ref<boolean>(false)

	onMounted(() => {
		if (uni.getStorageSync('token')) {
			skip.value = true
			uni.redirectTo({
				url: '/pages/homePage/index',
				// success: () => {
				// uni.showToast({
				// 	title: '欢迎回来',
				// 	icon: 'none',
				// });
				// },
			});
			// return; // 立即停止函数执行
		}
	});

	async function submit() : Promise<void> {
		deng.value = true
		loading.value = true
		const passwordEncryption : string = await encrypt(form.password)
		const params = { ...form, password: passwordEncryption }
		form.password = ''
		fetchData(params)
	}

	async function fetchData(params : {}) : Promise<void> {
		const data = await store.logIn(params)
		if (data) {
			uni.redirectTo({
				url: '/pages/homePage/index'
			})
			uni.showToast({
				title: '登录成功！',
				icon: 'none',
			});
			loading.value = false
			deng.value = false
		} else {
			deng.value = false
			console.log('123',msg.value,'321',logError.value);
			if (logError.value) {
				msg.value = logError.value
			} else {
				msg.value = '登录失败，请重试或联系管理员 '
			}
			show.value = true
			loading.value = false
			console.log('321',msg.value,'123',logError.value);
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100% !important;
	}

	.title {
		width: 429rpx;
		height: 50rpx;
		font-size: 42rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #1E1F22;
		line-height: 50rpx;
	}

	.submitText {
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
	}

	::v-deep .uni-input-placeholder {
		/* placeholder颜色 */
		color: #CFCFD8;
		/* placeholder字体大小 */
		font-size: 32rpx;
		/* placeholder位置 */
		text-align: left;

		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
	}

	::v-deep .uni-input-input {
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #1E1F22;
	}

	::v-deep input[type="password"] {
		font-size: 50rpx;
	}

	::v-deep input[type="text"] {
		font-size: 50rpx;
	}

	input {
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #1E1F22;
	}

	::v-deep .u-model__content__message {
		font-size: 28rpx !important;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #1E1F22;
		padding: 48rpx;
	}

	::v-deep .u-mode-center-box {
		width: 540rpx !important;
		height: 232rpx !important;
		background: #FFFFFF;
		box-shadow: 0px 4px 14px 0px rgba(47, 73, 140, 0.1);
		border-radius: 8rpx;
	}

	::v-deep .u-model__footer__button {
		font-size: 32rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #2F7BFF;
	}
</style>